<template>
<div class="person">
  姓:<input type="text" v-model="firstName"><br>
  姓:<input type="text" v-model="lastName"><br>
  全名：<span>{{fullName}}</span><br>
  <button @click="changeFullName">修改fullName</button>
</div>
</template>

<script lang="ts">
export default {
  name: 'Person',
}
</script>
<script setup lang="ts" name="Person">
import {ref,computed} from 'vue'
let firstName = ref('张')
let lastName = ref('三')
// let fullName = computed(()=>{
//   return firstName.value + lastName.value
// })
let fullName = computed({
  get(){
    return firstName.value + lastName.value
  },
  set(val){
   const [f,l] = val.split('-')
    firstName.value = f
    lastName.value = l
  }
})
function changeFullName(){
  fullName.value = '李-四'
}
</script>
<style scoped>

.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
button{
  padding: 0 5px;
}
li{
  front-size: 20px;
}
</style>